<template>
  <div id="addTaxBill">
    <div class="header">
      <el-steps :active="active" finish-status="success" :space="250" align-center>
        <el-step title="填写基础信息"></el-step>
        <el-step title="确认个税数据"></el-step>
        <el-step title="计算个税"></el-step>
      </el-steps>
    </div>
    <div class="content">
      <div class="step_content step1" v-if="active == 0">
        <el-form label-width="140px" size="small" :model="bill" :rules="rules" ref="ruleForm">
          <el-form-item label="个税计算单据名称" prop="name">
            <el-input v-model="bill.name"></el-input>
          </el-form-item>
          <el-form-item label="税款所属月" prop="month">
            <el-date-picker v-model="bill.month" type="month" placeholder="选择月"> </el-date-picker>
          </el-form-item>
          <el-form-item label="所属公司" prop="company">
            <el-select v-model="bill.company" placeholder="请选择所属公司">
              <el-option value="北京xxx信息科技有限公司">北京xxx信息科技有限公司</el-option>
              <el-option value="武汉xxx信息科技有限公司">武汉xxx信息科技有限公司</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属大类" prop="type">
            <el-select v-model="bill.type" placeholder="请选择所属大类">
              <el-option value="综合所得申报">综合所得申报</el-option>
              <el-option value="非居民所得申报">非居民所得申报</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属项目" prop="project">
            <el-select v-model="bill.project" placeholder="请选择所属项目">
              <el-option value="工资薪金申报">工资薪金申报</el-option>
              <el-option value="全年一次性奖金收入">全年一次性奖金收入</el-option>
              <el-option value="劳务报酬（一般、法律援助补贴、其他非连续劳务）">劳务报酬（一般、法律援助补贴、其他非连续劳务）</el-option>
              <el-option value="劳务报酬（保险营销员、证券经纪人、其他连续劳务）">劳务报酬（保险营销员、证券经纪人、其他连续劳务）</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="算税方式" prop="calculationType">
            <template>
              <el-radio v-model="bill.calculationType" label="1">在线算税</el-radio>
              <el-radio v-model="bill.calculationType" label="2">离线算税</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="计税数据来源" prop="taxSource">
            <template>
              <el-radio v-model="bill.taxSource" label="1">手工添加</el-radio>
              <el-radio v-model="bill.taxSource" label="2">工资表引入</el-radio>
            </template>
          </el-form-item>
          <el-form-item v-if="bill.taxSource == 2" prop="sheet">
            <el-select v-model="bill.sheet" placeholder="请选择工资表模板">
              <el-option value="工资表1">工资表1</el-option>
              <el-option value="工资表2">工资表2</el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="step_content step2" v-if="active == 1">
        <div class="top_step2">
          <span class="title"> {{ GetMonth(bill.month) }} {{ bill.type }}-{{ bill.project }}</span>

          <span class="text">总人数:{{ 0 }}人</span>
          <span class="text">收入总额:{{ 0.0 }}元</span>
          <span class="text">免税收入总额:{{ 0.0 }}元</span>
        </div>
        <div class="query">
          <div class="left">
            <el-form label-width="80px" size="small">
              <el-form-item label="姓名/工号">
                <el-input v-model="bill.name" placeholder="请输入姓名/工号"></el-input>
              </el-form-item>
            </el-form>
            <el-button type="primary">查询</el-button>
          </div>
          <div class="right">
            <el-button type="primary">添加</el-button>
            <el-button type="default">预填专项附加扣除</el-button>
            <el-dropdown @command="handleCommand">
              <el-button type="default"> 更多菜单<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">导入</el-dropdown-item>
                <el-dropdown-item command="2">导出</el-dropdown-item>
                <el-dropdown-item command="3">减除费用扣除确认</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div>
          <el-table :data="rows2" height="100%">
            <el-table-column label="序号">
              <template slot-scope="{ row }">
                <el-checkbox :data-id="row.id"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="workNumber" label="工号" />
            <el-table-column prop="idType" label="证件类型" />
            <el-table-column prop="idCard" label="证件号码" />
            <el-table-column prop="company" label="所属公司" />
            <el-table-column prop="thisIncome" label="本期收入" min-width="50"></el-table-column>
            <el-table-column prop="thisExemptIncome" label="本期免税收入"></el-table-column>
            <el-table-column prop="elderly" label="基本养老保险费"></el-table-column>
            <el-table-column prop="medical" label="基本医疗保险费"></el-table-column>
            <el-table-column prop="unemployment" label="失业保险费"></el-table-column>
            <el-table-column prop="housing" label="住房公积金"></el-table-column>
            <el-table-column prop="sumChildren" label="累计子女教育"></el-table-column>
            <el-table-column prop="sumContinue" label="累计继续教育"></el-table-column>
            <el-table-column prop="sumLoanHousing" label="累计住房贷款利息"></el-table-column>
            <el-table-column prop="sumHousing" label="累计住房租金"></el-table-column>
            <el-table-column prop="sumRaise" label="累计赡养老人"></el-table-column>
            <el-table-column prop="sumLookAfter" label="累计3岁以下婴幼儿照护"></el-table-column>
            <el-table-column prop="annuity" label="企业（职业）年金"></el-table-column>
            <el-table-column prop="healthy" label="商业健康保险"></el-table-column>
            <el-table-column prop="endowmentInsurance" label="税延养老保险"></el-table-column>
            <el-table-column prop="other" label="其他"></el-table-column>
            <el-table-column prop="donation" label="准予扣除的捐赠额"></el-table-column>
            <el-table-column prop="reductionTax" label="减免税额"></el-table-column>
            <el-table-column prop="reductionCost" label="减除费用标准"></el-table-column>
            <el-table-column prop="taxPaid" label="已缴税额"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="step_content step3" v-if="active == 2">
        <div class="top_step3">
          <span class="title"> {{ GetMonth(bill.month) }} {{ bill.type }}-{{ bill.project }}</span>

          <span class="text">总人数:{{ 0 }}人</span>
          <span class="text">收入总额:{{ 0.0 }}元</span>
          <span class="text">免税收入总额:{{ 0.0 }}元</span>
        </div>
        <div class="query">
          <div class="left">
            <el-form label-width="80px" size="small">
              <el-form-item label="姓名/工号">
                <el-input v-model="bill.name" placeholder="请输入姓名/工号"></el-input>
              </el-form-item>
            </el-form>
            <el-button type="primary">查询</el-button>
          </div>
          <div class="right">
            <el-select v-model="calculationType">
              <el-option value="在线计算">在线计算</el-option>
              <el-option value="离线计算">离线计算</el-option>
            </el-select>
            <el-button type="primary">重新计算</el-button>
            <el-button type="default">导出</el-button>
          </div>
        </div>
        <div>
          <el-table :data="rows3" height="100%">
            <el-table-column label="序号">
              <template slot-scope="{ row }">
                <el-checkbox :data-id="row.id"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="workNumber" label="工号" />
            <el-table-column prop="idType" label="证件类型" />
            <el-table-column prop="idCard" label="证件号码" />
            <el-table-column prop="company" label="所属公司" />
            <el-table-column prop="sumIncome" label="累计收入" min-width="50"></el-table-column>
            <el-table-column prop="sumExemptIncome" label="累计免税收入"></el-table-column>
            <el-table-column prop="sumDeduction" label="累计减除费用"></el-table-column>
            <el-table-column prop="sumProject" label="累计扣除项目合计"></el-table-column>
            <el-table-column prop="sumDonations" label="累计准予扣除的捐赠额"></el-table-column>
            <el-table-column prop="sumTaxableIncome" label="累计应纳税所得额"></el-table-column>
            <el-table-column prop="TaxRate" label="税率/预扣率"></el-table-column>
            <el-table-column prop="According" label="速算扣除数"></el-table-column>
            <el-table-column prop="sumTaxPayable" label="累计应纳税额"></el-table-column>
            <el-table-column prop="sumTaxSavings" label="累计减免税额"></el-table-column>
            <el-table-column prop="sumWithholdingTax" label="累计应扣缴税额"></el-table-column>
            <el-table-column prop="TaxPaid" label="已缴税额"></el-table-column>
            <el-table-column prop="TaxPayable" label="应补(退）税额"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button style="margin-top: 12px;" @click="step(0)" v-if="active == 2 || active == 1">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="step(1)" type="primary" v-if="active != 2">下一步</el-button>
      <el-button style="margin-top: 12px;" @click="save" type="primary" v-if="active == 2">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "addTaxBill",
  data() {
    return {
      //步骤
      active: 0,
      //表单数据(填写基础信息)
      bill: {
        name: ""
      },
      //验证规则
      rules: {
        name: { required: true, message: "请输入个税计算单据名称", trigger: "blur" },
        month: { required: true, message: "请选择税款所属月", trigger: "change" },
        company: { required: true, message: "请选择所属公司", trigger: "change" },
        project: { required: true, message: "请选择所属项目", trigger: "change" },
        calculationType: { required: true, message: "请选择算税方式", trigger: "change" },
        taxSource: { required: true, message: "请选择计税数据来源", trigger: "change" },
        type: { required: true, message: "请选择所属大类", trigger: "change" },
        sheet: { required: true, message: "请选择工资表模板", trigger: "change" }
      },
      //确认个税数据
      rows2: [
        {
          num: 1,
          name: "徐彬",
          workNumber: "10156",
          date: "2022-09",
          idType: "身份证",
          idCard: "412828199905211547",
          children: "- -",
          continue: "- -",
          housing: "- -",
          support: "- -",
          lookAfter: "- -",
          status: "报送成功",
          companyname: "北京云代账",
          updateTime: "2022-09-17 14:32"
        }
      ],
      //计算个税
      rows3: [
        {
          num: 1,
          name: "徐彬",
          workNumber: "10156",
          date: "2022-09",
          idType: "身份证",
          idCard: "412828199905211547",
          companyname: "北京云代账"
        }
      ],
      calculationType: ""
    };
  },
  methods: {
    save() {
      console.log("save");
    },
    //步骤改变
    step(type) {
      if (this.active == 0) {
        this.$refs["ruleForm"].validate(valid => {
          if (valid) {
            this.active++;
            return true;
          } else {
            return false;
          }
        });
      } else {
        if (type == 1) {
          this.active++;
        } else {
          this.active--;
        }
      }
    },
    GetMonth(date) {
      if (date) {
        date = new Date(date);
        console.log(date.getMonth(), "date.getMonth()");
        var month = date.getMonth() + 1;
        var yearmonth = date.getFullYear() + "年" + (month >= 10 ? month : "0" + month) + "月";
        return yearmonth;
      }
    }
  }
};
</script>

<style lang="less" scoped>
#addTaxBill {
  display: flex;
  flex-flow: column;
  .header {
    display: flex;
    justify-content: center;
    .el-steps {
      width: 46%;
    }
  }
  .content {
    .step_content {
      margin-top: 28px;
    }
    .step1 {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .step2 {
      padding: 20px 50px;
      .top_step2 {
        .title {
          font-weight: 600;
          margin-right: 50px;
          font-size: 20px;
        }
        .text {
          font-size: 14px;
          margin-left: 8px;
          font-weight: 600;
        }
      }
      .query {
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        .left {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .form {
            display: inline-flex;
            .el-form-item {
              margin-right: 8px;
            }
          }
        }
        .right {
        }
      }
    }
    .step3 {
      padding: 20px 50px;
      .top_step3 {
        .title {
          font-weight: 600;
          margin-right: 50px;
          font-size: 20px;
        }
        .text {
          font-size: 14px;
          margin-left: 8px;
          font-weight: 600;
        }
      }
      .query {
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        .left {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .form {
            display: inline-flex;
            .el-form-item {
              margin-right: 8px;
            }
          }
        }
        .right {
          display: flex;
          flex-flow: row;
        }
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 40px;
    left: 50%;
  }
}
</style>
